﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/sy.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 头部 -->
    <div class="sy_headBox">
        <div class="sy_top">
            <div class="sy_top_con">
                <img src="images/title_logo.png" class="fl" onclick="javascript:location.href= 'index.html'"/>
                <span class="user_name">欢迎您！</span>|
                <a href="/logout">注销</a>
            </div>
        </div>
        <div class="sy_slogin"><img src="images/logo.png"/></div>
        <div class="sy_searchBox">
            <div class="searchLeft">
                <input type="text" placeholder="请输入检索词" v-model="keywords"
                       @keyup.13="searchEnterPress()"/>
                <a :href="keywords == null ?'/list.html':'/list.html?keywords='+keywords"></a>
            </div>
        </div>
    </div>
    <!-- nav -->

    <!-- 数据库列表 -->
    <div class="sy_dataList clearfix">
        <div class="data_nav fl">
            <ul>
                <li v-for="(item,index) in themeList"><a :class="{active:index == active}"
                                                         v-on:click="themeActiveChange(index,item.id)">{{item.themename}}</a>
                </li>
                <!--			<li><a class="active">政策法规</a></li>-->
                <!--			<li><a>宏观环境</a></li>-->
                <!--			<li><a>友商信息</a></li>-->
                <!--			<li><a>供应链</a></li>-->
                <!--			<li><a>动态资讯</a></li>-->
            </ul>
        </div>
        <div class="datalist_con fr">
            <div class="datalist_con_modal" v-for="theme in dataList">
                <div class="modal_title"><span>{{theme.themename}}</span></div>

                <div class="ifour_txt">
                    <div v-for="(item,index) in theme.dataList">
                        <div class="ifour_txt_left">
                            <i class="icon_topItem"></i>
                            <a :href="'/detail.html?id='+item.urlid+'&type='+item.type">{{item.title}}</a>
                        </div>
                        <div class="ifour_txt_right">{{item.pubdate}}</div>
                    </div>
                </div>
                <div class="textmore"><a :href="'/list.html?parentType='+theme.id">more >></a></div>
            </div>
        </div>

    </div>
    <div class="main footer">
        <p>地址：北京市西城区白广路***********</p>
        <p>电话：010-83******</p>
        <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
    </div>
</div>
<script type="text/javascript">

    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            active: 0,
            queryData: {
                pageNo: 1,
                pageNum: 5,
                type: null
            },
            themeList: [],
            dataList: [],
            keywords: null
        },
        methods: {
            initData() {
                axios.post("/data/search/tree", this.queryData).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.themeList = result.themeTreeList;
                        app.dataList = result.dataList;
                    }
                })
            },
            themeActiveChange(index, type) {
                this.active = index;
                this.queryData.type = type;
                this.initData();
            },
            searchEnterPress() {
                location.href = this.keywords == null ? '/list.html' : '/list.html?keywords=' + this.keywords;
            }
        },
        mounted: function () {
            this.$nextTick(() => {
                this.initData();
            });
        }
    })
</script>
</body>
</html>